@import "../shared/helper";

%legend {
  height: px(40);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-right: px(10);
  > span {
    display: inline-block;
    width: px(16);
    height: px(10);
    border-radius: px(2);
    margin: 0 px(10);
  }
}

.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #010310;
  color: white;
  font-size: px(16);
  > header {
    height: px(99);
    background-size: cover;
    width: px(2420);
    margin: 0 auto;
  }
  > footer {
    height: px(68);
    border: 1px solid #0d2d59;
    margin: px(20) 0 1px;
    border-radius: 4px;
    background: #0c0d2b;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  > main {
    width: px(2420);
    margin: 0 auto;
    padding-top: px(30);
    flex: 1;
    display: grid;
    grid-template:
      "box1 box2 box4 box5" 755fr
      "box3 box3 box4 box5" 363fr / 366fr 361fr 811fr 747fr;
    grid-column-gap: px(28);
    grid-row-gap: px(28);
    > section {
      text-align: center;
    }
    .bordered {
      border: 1px solid #0764bc;
      border-radius: 4px;
      position: relative;
      box-shadow: 0 0 2px 0 #0e325f, inset 0 0 2px 0 #0e325f;
      background: #0f113a;
      &::before {
        pointer-events: none;
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        border-radius: 4px;
        box-shadow: 17px 0 0 -16px #0e325f, -17px 0 0 -16px #0e325f, 0 17px 0 -16px #0e325f,
          0 -17px 0 -16px #0e325f, 9px 0 0 -8px #0d4483, -9px 0 0 -8px #0d4483, 0 9px 0 -8px #0d4483,
          0 -9px 0 -8px #0d4483;
      }
    }
    > .section1 {
      grid-area: box1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    > .section2 {
      grid-area: box2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    > .section3 {
      grid-area: box3;
    }
    > .section4 {
      grid-area: box4;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    > .section5 {
      grid-area: box5;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      > .row1 {
        height: px(317);
      }
      > .row2 {
        height: px(317);
      }
      > .row3 {
        height: px(455);
      }
    }
    .管辖统计,
    .破获排名,
    .发案趋势,
    .案发时段,
    .战果,
    .籍贯,
    .年龄段,
    .案发类型,
    .案发街道,
    .作案手段 {
      height: px(315);
      display: flex;
      flex-direction: column;
      align-items: center;
      h2 {
        flex-shrink: 0;
        border: 1px solid #0a5299;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        font-size: px(22);
        line-height: px(24);
        padding: px(10) px(28);
        text-shadow: 0 0 px(3) white;
      }
      .charts {
        width: 100%;
        flex: 1;
        display: flex;
      }
      .chart {
        flex: 1;
        width: 100%;
      }
    }
    .发案趋势,
    .案发时段 {
      height: px(363);
    }
    .chart11,
    .chart12 {
      flex: 1;
      display: flex;
      flex-direction: column;
      > .chart {
        display: flex;
        > .main {
          flex: 1;
        }
      }
      .legend {
        @extend %legend;
      }
    }
    .年龄段 {
      display: flex;
      flex-direction: column;
      height: px(363);
      > .charts {
        padding: px(30);
      }
      &-图1,
      &-图2,
      &-图3 {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      &-图1,
      &-图2 {
        .legend {
          @extend %legend;
          .male {
            background: #33a4fa;
          }
          .female {
            background: #8d70f8;
          }
        }
        .chart {
          position: relative;
          display: flex;
          > .main {
            flex: 1;
          }
          > .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #33a4fa;
            font-size: px(40);
            text-shadow: 0 0 px(20) #33a4fa;
            font-weight: bold;
          }
        }
      }
      &-图2 {
        width: px(290);
        flex-shrink: 0;
        .legend {
          justify-content: flex-start;
        }
      }
      &-图3 {
        border: 1px solid #08397d;
        h3 {
          font-size: px(20);
          color: #7ab6db;
          margin-top: px(6);
        }
      }
    }
    .籍贯 {
      height: px(753);
      background: transparent;
      > .wrapper {
        position: relative;
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        .chart {
          flex: 1;
        }
        .legend {
          position: absolute;
          top: px(40);
          left: px(20);
          display: flex;
          align-items: center;
          font-size: px(22);
          padding: px(20) px(10) px(20) 0;
          border-radius: 0;
          .icon {
            margin: 0 px(10);
            display: inline-block;
            width: px(16);
            height: px(16);
            border-radius: 50%;
            background: #1cecd9;
          }
        }
        .notes {
          position: absolute;
          bottom: px(10);
          right: px(10);
        }
      }
    }
    .战果,
    .作案手段 {
      padding: 0 px(24);
      > table {
        width: 100%;
        table-layout: fixed;
        margin-top: px(25);
        border-collapse: collapse;
        th,
        td {
          border: 1px solid #1a3671;
        }
        thead {
          th {
            height: px(70);
            box-shadow: inset 0 0 px(60) 0 #1f3d85;
          }
        }
        tbody {
          td {
            height: px(50);
            width: px(84);
            background: #1c2456;
          }
        }
      }
    }
    .作案手段 {
      > table {
        tbody {
          td {
            height: px(26);
          }
        }
      }
    }
    .破获排名 {
      height: px(423);
      .legend {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        padding: 0 px(20) px(10);
        > .first,
        > .second {
          display: inline-block;
          width: px(18);
          height: px(12);
          background: red;
          margin: 0 px(10);
        }
        .first {
          background: linear-gradient(90deg, #2034f9 0%, #04a1ff 100%);
        }
        .second {
          background: linear-gradient(90deg, #b92ae8 0%, #6773e7 100%);
        }
      }
    }
  }
}
